<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
	<title>Cirkana Viewer Locator</title>
	<style>
		html,body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			font-size: xx-small;
		}
		
		.border {
			border: 1px solid black;
		}
		
	</style>
</head>
<body onload="javascript:showMap();">
	<div id="map" style="width: 103%; height: 100%; "></div>
	<script type="text/javascript">
		var map;
		function showMap() {
			var div = document.getElementById('map');
			var lat = parseFloat(comm.getLatitude());
			var lon = parseFloat(comm.getLongitude());
			var latlonIni = new google.maps.LatLng(lat, lon);
			var options = {
	        zoom: 13,
	        center: latlonIni,
	        mapTypeId: google.maps.MapTypeId.ROADMAP
	      };
			map = new google.maps.Map(div, options);
			setCurrentLocation(latlonIni);
			google.maps.event.addListener(map, "click", function(ev){
				comm.setLatitude(ev.latLng.lat());
				comm.setLongitude(ev.latLng.lng());
				setCurrentLocation(ev.latLng);
			});
		}

		var currentLocationMarker;
		function setCurrentLocation(latlng) {
			if (!currentLocationMarker) {
				var options = {
						map: map,
						position: latlng
				}
				currentLocationMarker = new google.maps.Marker(options);
			} else {
				currentLocationMarker.setPosition(latlng);
			}
		}

	</script>
</body>
</html>